<!-- 添加设备 -->
<template>
  <el-dialog :visible.sync="dialogVisible" :before-close="handleCloseBindWarnStandard" :close-on-click-modal="false" :title="title" width="900px" height="300px">
    <el-form v-loading="formLoading" ref="dialogForm" :model="dialogForm" :rules="rules" label-width="120px" class="twoColumn">
      <el-form-item label="所属单位" prop="corp_id">
        <el-select :disabled="dialogType=='修改'||dialogType === '绘制分区添加'" v-model="dialogForm.corp_id" clearable filterable allow-create default-first-option autocomplete="off" placeholder="请选择单位名称" @change="companyChange">
          <el-option v-for="item in companyList" :key="item.corp_id" :label="item.name" :value="item.corp_id" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属建筑群" prop="park_id">
        <el-select :disabled="dialogType === '绘制分区添加'" v-model="dialogForm.park_id" placeholder="请选择所属建筑群" @change="changeSelectPark">
          <el-option v-for="item in parksList" :key="item.park_id" :label="item.name" :value="item.park_id" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属建筑" prop="building_id">
        <el-select :disabled="dialogType === '绘制分区添加'" v-model="dialogForm.building_id" placeholder="请选择所属建筑" @change="changeSelectBuild">
          <el-option v-for="item in buildList" :key="item.building_id" :label="item.name" :value="item.building_id" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属楼层" prop="floor_id">
        <el-select :disabled="dialogType === '绘制分区添加'" v-model="dialogForm.floor_id" placeholder="请选择所属楼层" @change="changeSelectFloor">
          <el-option v-for="item in floorList" :key="item.floor_id" :label="item.name" :value="item.floor_id" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属分区" prop="zone_id">
        <el-select :disabled="dialogType === '绘制分区添加'" v-model="dialogForm.zone_id" placeholder="请选择所属分区">
          <el-option v-for="item in partitionList" :key="item.zone_id" :label="item.name" :value="item.zone_id" />
        </el-select>
      </el-form-item>
      <el-form-item label="位置" prop="position">
        <el-input v-model="dialogForm.position" placeholder="请输入位置" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="设备系统" prop="sid">
        <el-select :disabled="dialogType=='修改'" v-model="dialogForm.sid" placeholder="请选择设备系统" @change="sidChange">
          <el-option v-for="(value, key) in systemList" :key="key" :label="value" :value="key" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型" prop="tid">
        <el-select :disabled="dialogType=='修改'" v-model="dialogForm.tid" placeholder="请选择设备类型" @change="tidChange">
          <el-option v-for="(value, key) in deviceTypeList" :key="key" :label="value" :value="key" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备模型" prop="mid">
        <el-select :disabled="dialogType=='修改'" v-model="dialogForm.mid" placeholder="请选择设备模型">
          <el-option v-for="(value, key) in deviceModelList" :key="key" :label="value" :value="key" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备标识">
        <el-input :disabled="dialogType=='修改'" v-model="dialogForm.UID" placeholder="请输入设备标识" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="阈值上限">
        <el-input v-model="dialogForm.upperLimit" placeholder="请输入阈值上限" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="阈值下限">
        <el-input v-model="dialogForm.lowerLimit" placeholder="请输入阈值下限" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getSocialUnit } from '@/api/company'
import { parksList, buildList, floorList } from '@/api/park'
import { systemList, deviceTypeList, deviceModelList } from '@/api/common'
import { partitionList } from '@/api/partition'
import { equipmentAdd, equipmentUpdate } from '@/api/equipmentManage'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    dialogForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    dialogType: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      title: '',
      sid: '',
      parksList: [],
      buildList: [],
      floorList: [],
      partitionList: [],
      // 添加form验证
      rules: {
        corp_id: [{
          required: true,
          message: '请选择单位',
          trigger: 'blur'
        }],
        park_id: [{
          required: true,
          message: '请选择建筑群',
          trigger: 'blur'
        }],
        building_id: [{
          required: true,
          message: '请选择建筑',
          trigger: 'blur'
        }],
        floor_id: [{
          required: true,
          message: '请选择层楼',
          trigger: 'blur'
        }],
        zone_id: [{
          required: true,
          message: '请选择分区',
          trigger: 'blur'
        }],
        position: [{
          required: true,
          message: '请输入位置',
          trigger: 'blur'
        }],
        sid: [{
          required: true,
          message: '请选择设备系统',
          trigger: 'blur'
        }],
        tid: [{
          required: true,
          message: '请选择设备类型',
          trigger: 'blur'
        }],
        mid: [{
          required: true,
          message: '请选择设备模型',
          trigger: 'blur'
        }]
      },
      companyList: [],
      systemList: [],
      deviceTypeList: [],
      deviceModelList: [],
      formLoading: false
    }
  },
  watch: {
    dialogType(val) {
      if (this.dialogType === '添加') {
        this.title = '添加设备'
        this.requestFn = equipmentAdd
      } else if (this.dialogType === '绘制分区添加') {
        this.title = '添加设备'
        this.requestFn = equipmentAdd
      } else {
        this.title = '修改设备'
        this.requestFn = equipmentUpdate
      }
    },
    dialogForm(val) {
      if (this.dialogType === '添加') {
        this.title = '添加设备'
        this.requestFn = equipmentAdd
        this.getCompanyList()
        this.getSystem()
      } else if (this.dialogType === '绘制分区添加') {
        this.title = '添加设备'
        this.requestFn = equipmentAdd
        this.getCompanyList()
        this.getParksList()
        this.getBuildList()
        this.getFloorList()
        this.getSystem()
        this.getPartitionList()
        this.getDeviceType(this.dialogForm.sid)
        this.getDeviceModel(this.dialogForm.tid)
      } else {
        this.title = '修改设备'
        this.requestFn = equipmentUpdate
        this.getCompanyList()
        this.getParksList()
        this.getBuildList()
        this.getFloorList()
        this.getSystem()
        this.getPartitionList()
        this.getDeviceType(this.dialogForm.sid)
        this.getDeviceModel(this.dialogForm.tid)
      }
    }
  },
  created() {
    if (this.dialogType === '添加') {
      this.title = '添加设备'
      this.requestFn = equipmentAdd
      this.getCompanyList()
      this.getSystem()
    } else if (this.dialogType === '绘制分区添加') {
      this.title = '添加设备'
      this.requestFn = equipmentAdd
      this.getCompanyList()
      this.getParksList()
      this.getBuildList()
      this.getFloorList()
      this.getSystem()
      this.getPartitionList()
      this.getDeviceType(this.dialogForm.sid)
      this.getDeviceModel(this.dialogForm.tid)
    } else {
      this.title = '修改设备'
      this.requestFn = equipmentUpdate
      this.getCompanyList()
      this.getParksList()
      this.getBuildList()
      this.getFloorList()
      this.getSystem()
      this.getPartitionList()
      this.getDeviceType(this.dialogForm.sid)
      this.getDeviceModel(this.dialogForm.tid)
    }
  },
  methods: {
    submitForm(val) {
      console.log(JSON.stringify(this.dialogForm))
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          const that = this
          that.formLoading = true
          var params = {}
          if (this.dialogType === '添加' || this.dialogType === '绘制分区添加') {
            params = {
              corp_id: that.dialogForm.corp_id,
              park_id: that.dialogForm.park_id,
              building_id: that.dialogForm.building_id,
              floor_id: that.dialogForm.floor_id,
              zone_id: that.dialogForm.zone_id,
              field: that.dialogForm.field,
              sid: that.dialogForm.sid,
              tid: that.dialogForm.tid,
              mid: that.dialogForm.mid,
              position: that.dialogForm.position,
              UID: that.dialogForm.UID,
              upperLimit: that.dialogForm.upperLimit,
              lowerLimit: that.dialogForm.lowerLimit
            }
          }
          if (this.dialogType === '修改') {
            params = {
              device_id: that.dialogForm.device_id,
              corp_id: that.dialogForm.corp_id,
              park_id: that.dialogForm.park_id,
              building_id: that.dialogForm.building_id,
              floor_id: that.dialogForm.floor_id,
              zone_id: that.dialogForm.zone_id,
              field: that.dialogForm.field,
              sid: that.dialogForm.sid,
              tid: that.dialogForm.tid,
              mid: that.dialogForm.mid,
              position: that.dialogForm.position,
              UID: that.dialogForm.UID,
              upperLimit: that.dialogForm.upperLimit,
              lowerLimit: that.dialogForm.lowerLimit
            }
          }
          console.log(JSON.stringify(params))
          that.requestFn(params)
            .then((res) => {
              const data = res.data
              if (data.code === 40000) {
                that.$message.success(data.message)
                that.$emit('submitForm', that.dialogForm)
                that.formLoading = false
              } else {
                that.$message.warning(data.message)
                that.formLoading = false
              }
            })
            .catch((err) => {
              console.log(err)
              that.formLoading = false
            })
        }
      })
    },
    // 关闭弹窗
    handleCancel() {
      this.$refs['dialogForm'].resetFields()
      this.$emit('getCancel')
    },
    // 关闭弹窗，不可以删这个方法。不用这个方法点击遮罩层关闭会报错
    handleCloseBindWarnStandard() {
      this.$refs['dialogForm'].resetFields()
      this.$emit('closeBindWarnStandard')
    },
    // 单位下拉框查询,
    getCompanyList() {
      this.listLoading = true
      const that = this
      getSocialUnit()
        .then(response => {
          if (response.data.code === 40000) {
            that.companyList = response.data.data
            that.showTopMenu = true
          } else if (response.data.code === 40003 && response.data.message === '权限验证失败!') {
            that.showTopMenu = false
          } else {
            that.$message.warning(response.data.message)
          }
          that.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    // 单位下拉框
    companyChange(value) {
      if (value !== '') {
        this.dialogForm.park_id = ''
        this.dialogForm.building_id = ''
        this.dialogForm.floor_id = ''
        this.dialogForm.zone_id = ''
        this.getParksList()
      }
    },
    // 获取建筑群
    getParksList() {
      const that = this
      var listQuery = {
        page: 1,
        offset: 1000,
        corp_id: that.dialogForm.corp_id
      }
      parksList(listQuery)
        .then(response => {
          if (response.data.code === 40000) {
            that.parksList = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].index = index
              that.parksList.push(array[index])
            })
          }
        })
        .catch(() => {
          this.parksList = []
        })
    },
    // 建筑群下拉框
    changeSelectPark() {
      this.dialogForm.building_id = ''
      this.dialogForm.floor_id = ''
      this.dialogForm.zone_id = ''
      this.getBuildList()
    },
    // 获取建筑
    getBuildList() {
      const that = this
      var listQuery = {
        page: 1,
        offset: 1000,
        park_id: that.dialogForm.park_id
      }
      buildList(listQuery)
        .then(response => {
          if (response.data.code === 40000) {
            that.buildList = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].index = index
              that.buildList.push(array[index])
            })
          }
        })
        .catch(() => {
          this.buildList = []
        })
    },
    // 建筑下拉框
    changeSelectBuild() {
      this.dialogForm.floor_id = ''
      this.dialogForm.zone_id = ''
      this.getFloorList()
    },
    // 获取楼层
    getFloorList() {
      const that = this
      var listQuery = {
        page: 1,
        offset: 1000,
        corp_id: that.dialogForm.corp_id,
        building_id: that.dialogForm.building_id
      }
      floorList(listQuery)
        .then(response => {
          if (response.data.code === 40000) {
            that.floorList = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].index = index
              that.floorList.push(array[index])
            })
            console.log(that.dialogForm.floor_id)
            console.log(that.floorList)
          }
        })
        .catch(() => {
          this.floorList = []
        })
    },
    // 楼层下拉框
    changeSelectFloor() {
      this.dialogForm.zone_id = ''
      this.getPartitionList()
    },
    // 获取分区
    getPartitionList() {
      const that = this
      var listQuery = {
        page: 1,
        offset: 1000,
        corp_id: that.dialogForm.corp_id,
        park_id: that.dialogForm.park_id,
        building_id: that.dialogForm.building_id
      }
      partitionList(listQuery)
        .then(response => {
          if (response.data.code === 40000) {
            that.partitionList = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].index = index
              that.partitionList.push(array[index])
            })
          }
        })
        .catch(() => {
          this.partitionList = []
        })
    },
    // 获取设备系统
    getSystem() {
      const that = this
      systemList()
        .then((res) => {
          const data = res.data
          if (data.code === 40000) {
            that.systemList = data.data
          } else {
            that.$message.warning(data.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    sidChange(data) {
      this.getDeviceType(data)
      this.dialogForm.tid = ''
      this.dialogForm.mid = ''
      // this.getDeviceModel(data)
    },
    // 获取设备类型
    getDeviceType(sid) {
      const that = this
      var listQuery = {
        sid: sid
      }
      deviceTypeList(listQuery)
        .then((res) => {
          const data = res.data
          if (data.code === 40000) {
            that.deviceTypeList = data.data
          } else {
            that.$message.warning(data.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    tidChange(data) {
      this.getDeviceModel(data)
      this.dialogForm.mid = ''
    },
    // 获取设备模型
    getDeviceModel(tid) {
      const that = this
      var listQuery = {
        tid: tid
      }
      deviceModelList(listQuery)
        .then((res) => {
          const data = res.data
          if (data.code === 40000) {
            that.deviceModelList = data.data
          } else {
            that.$message.warning(data.message)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
